<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container search">
        <searchuinew ref="searchuinew" :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording">
          <template slot="button">
            <el-button size="mini" type="warning" @click="handleApply">申领</el-button>
          </template>
        </searchuinew>
      </div>
      <div class="panel-container totalData">
        <div class="title">数据统计</div>
        <el-row :gutter="24" class="totalBlock">
          <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" class="totalItem">
            <div class="item" @click="handleApply">
              <div class="item-num">{{ info ? info.wait_apply : '0' }}</div>
              <div class="item-brief">待申领</div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" class="totalItem">
            <div class="item" :class="{ active: searchParams.follow_type === 1 }" @click="handleFollowType(1)">
              <div class="item-num">{{ info ? info.comp : '0' }}</div>
              <div class="item-brief">已完成</div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" class="totalItem">
            <div class="item" :class="{ active: searchParams.follow_type === 2 }" @click="handleFollowType(2)">
              <div class="item-num">{{ info ? info.no_comp : '0' }}</div>
              <div class="item-brief">待完成</div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" class="totalItem">
            <div class="item" :class="{ active: searchParams.follow_type === 8 }" @click="handleFollowType(8)">
              <div class="item-num">{{ info ? info.zc : '0' }}</div>
              <div class="item-brief">已发资产</div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" class="totalItem">
            <div class="item" :class="{ active: searchParams.follow_type === 9 }" @click="handleFollowType(9)">
              <div class="item-num">{{ info ? info.dx : '0' }}</div>
              <div class="item-brief">已发独享</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="panel-container detailTable">
        <el-table :data="tableData" size="mini" style="width: 100%">
          <el-table-column prop="index" label="序号" width="50"> </el-table-column>
          <el-table-column prop="user" label="数据接收人" width="100"> </el-table-column>
          <el-table-column prop="task_name" label="任务名称"> </el-table-column>
          <el-table-column prop="contact_name" label="客户名称" width="80"> </el-table-column>
          <el-table-column prop="contact_phone" label="联系方式">
            <template slot-scope="scope">
              <a v-if="scope.row.url" :href="getLink(scope)" class="link"> {{ scope.row.contact_phone }} </a>
              <span v-else> {{ scope.row.contact_phone }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="company_name" label="公司名称"> </el-table-column>
          <el-table-column prop="company_address" label="公司地址"> </el-table-column>
          <el-table-column prop="is_follow_show" label="回访状态" width="80"> </el-table-column>
          <el-table-column prop="follow_type_show" label="回访详情" width="80"> </el-table-column>
          <el-table-column prop="talk_start_time" label="外呼时间"> </el-table-column>
          <el-table-column prop="follow_time" label="回访时间"> </el-table-column>
          <el-table-column prop="desc" label="备注" show-overflow-tooltip> </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          :current-page="pageNumber"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalPage"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
        ></el-pagination>
      </div>
    </div>

    <!--  申领 -->
    <el-dialog title="申领" :visible.sync="showDialogApply">
      <DialogApply v-if="showDialogApply" :userList="userList" :search="applySearch" @close="showDialogApply = false" @success="handleApplySuccess" />
    </el-dialog>
  </div>
</template>

<script>
import { apiUserDeptShow, apiAiCountShow } from '@/api/outboundCall'
import { isMobile, formatFormData } from '@/utils/index'
import DialogApply from './components/DialogApply.vue'

export default {
  name: 'smsStatistics',
  components: { DialogApply },
  data() {
    return {
      userList: [],
      showDialogApply: false,
      info: {},
      typeList: [
        { id: 1, name: '资产' },
        { id: 2, name: '回收' },
        { id: 3, name: '造粒厂' },
        { id: 4, name: '制品厂' },
        { id: 5, name: '智能' },
        { id: 6, name: '名录' },
      ],
      followTypeList: [
        { id: 1, name: '无法接通' },
        { id: 2, name: '无人接听' },
        { id: 3, name: '拒接' },
        { id: 4, name: '用户正忙' },
        { id: 5, name: '没有东西卖' },
        { id: 6, name: '回收' },
        { id: 7, name: '添加微信' },
        { id: 8, name: '已发资产' },
        { id: 9, name: '已发独享' },
        { id: 10, name: '重复发送' },
        { id: 11, name: '空号' },
      ],
      AIStatisticsInfo: {},
      pageNumber: 1,
      pageSize: 10,
      totalPage: 0,
      searchFormArr: [
        {
          fieldName: '任务名称：',
          type: 'input',
          field: 'task_name',
          placeholder: '请输入任务名称',
          width: 180,
        },
        {
          fieldName: '时间选择:',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '信息来源:',
          type: 'select',
          field: 'run_type',
          option: [
            { id: 1, text: '资产' },
            { id: 2, text: '回收' },
            { id: 3, text: '造粒厂' },
            { id: 4, text: '制品厂' },
            { id: 5, text: '智能' },
            { id: 6, text: '名录' },
            { id: 7, text: '商铺留言' },
            { id: 8, text: '抖音|快手' },
          ],
          placeholder: '请选择信息来源',
          width: 180,
        },
        {
          fieldName: '数据接收人:',
          type: 'select',
          field: 'user_id',
          option: [],
          placeholder: '请选择数据接收人',
          width: 180,
        },
        {
          fieldName: '回访结果:',
          type: 'select',
          field: 'follow_type2',
          option: [
            { id: 1, text: '无法接通' },
            { id: 2, text: '无人接听' },
            { id: 3, text: '拒接' },
            { id: 4, text: '用户正忙' },
            { id: 5, text: '没有东西卖' },
            { id: 6, text: '回收' },
            { id: 7, text: '添加微信' },
            { id: 8, text: '已发资产' },
            { id: 9, text: '已发独享' },
            { id: 10, text: '重复发送' },
            { id: 11, text: '空号' },
          ],
          placeholder: '请选择回访结果',
          width: 180,
        },
        {
          fieldName: '手机号：',
          type: 'input',
          field: 'phone',
          placeholder: '请输入手机号',
          width: 180,
        },
      ],
      isAccording: true,
      searchParams: {
        task_name: '',
        start_time: '',
        end_time: '',
        run_type: '',
        user_id: '',
        follow_type: '',
        follow_type2: '',
        phone: '',
      },
      tableData: [],
      type: 1,
    }
  },
  computed: {
    applySearch() {
      return {
        task_name: this.searchParams.task_name,
        start_time: this.searchParams.start_time,
        end_time: this.searchParams.end_time,
        run_type: this.searchParams.run_type,
      }
    },
  },
  created() {
    const search = window.location.hash.split('?')[1]
    if (isMobile()) {
      this.$router.replace('/outCallStatistics?' + search)
    }
    if (this.$route.query.type) {
      this.type = parseInt(this.$route.query.type)
    }
    this.setSearchDetailParma()
  },
  mounted() {
    this.getUserList()
    this.getList()
  },
  methods: {
    // 列表查询
    searchParma(e) {
      if (e.time && e.time[0] && e.time[1]) {
        this.searchParams.start_time = e.time[0]
        this.searchParams.end_time = e.time[1]
      } else {
        this.searchParams.start_time = ''
        this.searchParams.end_time = ''
      }
      if (e.run_type) {
        this.searchParams.run_type = e.run_type
      } else {
        this.searchParams.run_type = ''
      }
      if (e.user_id) {
        this.searchParams.user_id = e.user_id
      } else {
        this.searchParams.user_id = ''
      }
      if (e.follow_type2) {
        this.searchParams.follow_type2 = e.follow_type2
      } else {
        this.searchParams.follow_type2 = ''
      }
      if (e.phone) {
        this.searchParams.phone = e.phone
      } else {
        this.searchParams.phone = ''
      }
      if (e.task_name) {
        this.searchParams.task_name = e.task_name
      } else {
        this.searchParams.task_name = ''
      }
      this.pageNumber = 1
      this.getList()
    },
    getUserList() {
      apiUserDeptShow(formatFormData({ t: this.type })).then((res) => {
        const { data } = res
        const item = this.searchFormArr.find((item) => {
          return item.field === 'user_id'
        })
        if (item) {
          this.userList = item.option = data.map((item) => {
            return {
              id: item.id,
              text: item.nickname,
            }
          })
          if (this.searchParams.user_id) {
            if (!item.option.find((i) => i.id === this.searchParams.user_id)) {
              this.searchParams.user_id = 0
              this.$refs.searchuinew.clearFormItem('user_id')
            }
          }
        }
      })
    },
    getList() {
      const info = Object.assign({ pageNumber: this.pageNumber, pageSize: this.pageSize }, this.searchParams)
      localStorage.setItem('out-call-statistics-filter', JSON.stringify(info))
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiAiCountShow(formData)
        .then((res) => {
          this.info = res.info
          this.tableData = res.result.items
          this.tableData.forEach((item, index) => {
            item.index = index + 1
            const type = this.followTypeList.find((type) => {
              return type.id === item.follow_type
            })
            if (type) {
              item.follow_type_show = type.name
            }
            if (item.is_follow === 1) {
              item.is_follow_show = '已回访'
            } else {
              item.is_follow_show = '未回访'
              item.follow_type_show = ''
              item.desc = ''
            }
          })
          this.totalPage = res.result.total
        })
        .catch((e) => {
          this.tableData = []
          this.totalPage = 0
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getList()
    },
    // 设置日期筛选默认今天
    setSearchDetailParma() {
      const storage = JSON.parse(localStorage.getItem('out-call-statistics-filter'))
      const searchTime = this.searchFormArr.find((item) => item.field === 'time')
      const searchRunType = this.searchFormArr.find((item) => item.field === 'run_type')

      if (this.type === 2) {
        searchRunType.option = [{ id: 5, text: '智能' }]
        searchRunType.clearable = false
        searchRunType.default = 5
        this.searchParams.run_type = 5
      } else if (this.type === 3) {
        console.log(searchRunType.clearable)
        searchRunType.option = [{ id: 6, text: '名录' }]
        searchRunType.clearable = false
        searchRunType.default = 6
        this.searchParams.run_type = 6
      } else {
        searchRunType.option = [
          { id: 1, text: '资产' },
          { id: 2, text: '回收' },
          { id: 3, text: '造粒厂' },
          { id: 4, text: '制品厂' },
          { id: 7, text: '商铺留言' },
          { id: 8, text: '抖音|快手' },
        ]
      }

      if (!storage) {
        const today = new Date()
        const todayFormat = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
        searchTime.default = [todayFormat, todayFormat]
        this.searchParams.start_time = todayFormat
        this.searchParams.end_time = todayFormat
        return
      }
      // 恢复筛选值
      this.searchFormArr.forEach((item) => {
        const field = item.field
        if (field === 'time' && storage.start_time && storage.end_time) {
          searchTime.default = [storage.start_time, storage.end_time]
          this.searchParams.start_time = storage.start_time
          this.searchParams.end_time = storage.end_time
        } else {
          if (storage[field]) {
            if (field === 'run_type' && (!item.option.find((i) => i.id === storage.run_type) || this.type !== 1)) {
              return
            }
            item.default = storage[field]
            this.searchParams[field] = storage[field]
          }
        }
      })

      if (storage.follow_type) {
        this.searchParams.follow_type = storage.follow_type
      }
      if (storage.pageNumber) {
        this.pageNumber = storage.pageNumber
      }
      if (storage.pageSize) {
        this.pageSize = storage.pageSize
      }
    },
    // 数据统计筛选-已完成，待完成，同回访状态，已回访，未回访
    handleFollowType(type) {
      if (this.searchParams.follow_type === type) {
        this.searchParams.follow_type = ''
      } else {
        this.searchParams.follow_type = type
      }
      this.getList()
    },
    // 申领
    handleApply() {
      if (this.info.wait_apply > 0) {
        this.showDialogApply = true
      } else {
        this.$message({
          message: '暂无可申领数据',
          type: 'error',
        })
      }
    },
    handleApplySuccess() {
      this.showDialogApply = false
      this.getList()
    },
    getLink(scope) {
      return scope.row.url + '&uname=' + scope.row.user
    },
  },
}
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  height: 100vh;
}
.totalData {
  .title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .totalBlock {
    margin: 0 !important;
    .totalItem {
      padding: 12px 0 !important;
      cursor: pointer !important;
      .item {
        width: 100%;
        border-right: 1px solid #e6e6e6;
        flex-direction: column;
        display: flex;
        align-items: center;
        &.active {
          .item-num,
          .item-brief {
            color: #409eff !important;
          }
        }
        .item-num {
          font-size: 18px;
          font-weight: 700;
          color: #262626;
          margin-top: -2px;
        }
        .item-brief {
          margin-top: 4px;
          color: #8c8c8c;
          font-size: 12px;
        }
      }
      &:last-child {
        .item {
          border-right: none;
        }
      }
    }
  }
}
.link {
  color: #368aff;
  text-decoration: underline;
}
</style>
